import React, { useState, useEffect } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { Icon, TabBar } from 'zarm';

const TabIcon = Icon.createFromIconfont('//at.alicdn.com/t/font_2909058_i4dtkwk4har.js');


const Demo = () => {
  const history = useHistory();
  const location = useLocation();
  const [activeKey, setActiveKey] = useState('/home/movies');

  const change = (value) => {
    console.log(location);
    history.push(value);
    setActiveKey(value);
  }
  useEffect(() => {
    let str = location.pathname.split('/').slice(0, 3).join("/");
    setActiveKey(str);
  }, [location.pathname])
  return (
    <>
      <TabBar activeKey={activeKey} onChange={change} defaultActiveKey="movies">
        <TabBar.Item itemKey="/home/movies" title="电影/影院" icon={<TabIcon type="icon-dianyingpiaoiocn" />} />
        <TabBar.Item
          itemKey="/home/video"
          title="视频"
          icon={<TabIcon type="icon-shipin" />} />
        <TabBar.Item itemKey="/home/mini"
          title="小视频"
          icon={<TabIcon type="icon-shipin1" />}
          badge={{ shape: 'circle', text: '3' }}
        />
        <TabBar.Item
          itemKey="/home/show"
          title="演出"
          icon={<TabIcon type="icon-yanchufuwu" />}
          badge={{ shape: 'circle', text: '3' }}
        />
        <TabBar.Item
          itemKey="/home/mine"
          title="我的"
          icon={<TabIcon type="icon-wode1" />}
          badge={{ shape: 'dot' }}
        />
      </TabBar>

    </>
  );
};
export default Demo;
